<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vue</title>
    <link rel="stylesheet" href="https://libs.cdnjs.net/twitter-bootstrap/1.4.0/css/bootstrap.css" />
    <style>
        label[for] {
            width: 350px;
            float: none;
        }
        label[for="keyword"] {
            float: right;
        }
        div[id="app"] {
            margin: 20px 20px;
        }
        .toolbar {
            margin: 10px 0px;
        }
    </style>
</head>
<body>
<div id="app">
    <div class="toolbar">
        <label for="id"> ID:<input type="text" v-model="id" id="id"/></label>
        <!--@keyup.enter监听回车松开事件实现回车增加, vue提供了常见的键盘健映射对于没有提供的可以通过键盘码自定义映射-->
        <label for="name"> Name:<input type="text" v-model="name" id="name" @keyup.enter="add"/></label>
        <button class="btn btn-primary" @click="add">add</button>
        <!--自定义指令 v-focus, v-color字符串传值需要加单引号-->
        <label for="keyword"> Keyword:<input type="text" v-model="keyword" id="keyword" @change="search" v-focus v-color="'blue'"/></label>
    </div>
    <table class="table table-striped table-sm">
        <thead>
            <tr>
                <td>Index</td>
                <td>Id</td>
                <td>Name</td>
                <td>Date</td>
                <td>Option</td>
            </tr>
        </thead>
        <tbody>
            <!--查询方式1-->
<!--        <tr v-for="(item, i) in brands" :key="i">-->
<!--            &lt;!&ndash;<td >{{ i }}</td>&ndash;&gt;-->
<!--            <td v-text="i"></td>-->
<!--            <td v-text="item.id"></td>-->
<!--            <td v-text="item.name"></td>-->
<!--            <td v-text="item.date"></td>-->
<!--            <td><a href="#" @click.prevent="deleteRow(i)">delete</a></td>-->
<!--        </tr>-->

            <!--查询方式2-->
            <!--直接通过循环方法获取过滤数据-->
            <tr v-for="(item, i) in searchStr(keyword)" :key="i">
                <!--<td >{{ i }}</td>-->
                <td v-text="i"></td>
                <td v-text="item.id"></td>
                <td v-text="item.name"></td>
                <td v-text="item.date"></td>
                <td><a href="#" @click.prevent="deleteRow(i)">delete</a></td>
            </tr>
        </tbody>
    </table>
</div>


<script src="https://unpkg.com/vue/dist/vue.js"></script>

<script>

    // 自定义全局键盘码映射，键盘码可以百度一下
    Vue.config.keyCodes.f2 = 113; // 自定义映射，默认提供了如@keyup/down.enter, 自定义后可以使用@keyup.f2，如果不自定义可以@keyup.113

    // 自定义全局指令，自定义指令在标签中使用时必须增加 v- 前缀
    // 第一个参数是自定义指令名称不需要加v- 前缀，第二个是事件函数(参数是绑定的元素本身)
    // 更多用法参照：https://cn.vuejs.org/v2/guide/custom-directive.html
    Vue.directive('focus', {
        bind: function (el) {// 当dom元素与指令绑定时出发该方法执行
            console.log('focus inserted');
        },
        inserted: function (el) { // 当dom元素被插入到dom, 一般此时对dom的
            // 对于focus事件，只有在被插入到dom渲染后才生效，放在bind中不生效
            el.focus();
        },
        update: function (el) { // vnode更新 时调用
            console.log('focus update')
        }
    });

    Vue.directive('color', {
        bind: function (el, binding) { // 第二个参数时自定义指令相关的信息，包含参数
            // el.style.color = 'red';// 此时dom没插入，设置颜色后，在inserted时进行渲染，一般样式相关的在此处设置
            el.style.color = binding.value; //
        }
    });

    var vm = new Vue({
        el: '#app',
        data: {
            id: null,
            name: null,
            keyword: null,
            brands: [
                {id: 1, name: 'Nike', date: new Date().toLocaleDateString() + new Date().toLocaleTimeString()},
                {id: 2, name: 'Adidas', date: new Date().toLocaleDateString() + new Date().toLocaleTimeString()}
            ],
            allBrands: null
        },
        methods: {
            add() {
                this.brands.push({id: this.id, name: this.name
                    , date: new Date().toLocaleDateString() + new Date().toLocaleTimeString()});
            },
            deleteRow(index) {
                // console.log(index);
                // 删除/替换，第一个参数操作的数组元素位置，第二个参数操作长度，第三个参数是替换时要替换的值
                this.brands.splice(index, 1);

            },
            // 查询：方式1
            search() {
                // console.log(this.keyword)
                if (this.keyword == "") {
                    this.brands = this.allBrands;
                    this.allBrands = null;
                    return;
                }
                if (this.allBrands === null) {
                    this.allBrands = this.brands;
                }
                // this.brands = this.allBrands.filter(b => b.name.indexOf(this.keyword) != -1);
                // ES6中string的新方法includes
                this.brands = this.allBrands.filter(b => b.name.includes(this.keyword));
            },
            searchStr(keyword) {
                // console.log(keyword);
                if (keyword == null) {
                    keyword = '';
                }
                return this.brands.filter(b => b.name.includes(keyword));
            },
            deleteById(id) {
                // 方式1：查找某个item的索引根据条件，然后根据索引删除
                // var index = this.brands.findIndex(item => {
                //     return item.id == id;
                // });

                // 方式2：可以借助some函数
                this.brands.some((item, i) => {
                    if (item.id == id) { // deleteById(item.id)删除
                        this.brands.splice(i, 1);
                        return true;
                    }
                })
            },
        },

        // 私有指令定义
        directives: {
            color: {
                bind: function (el, binding) {
                    el.style.color = binding.value; //
                }
            },
            fontsize: function (el, binding) { // 简写形式，相当于bind 和 update中都写了这里面的代码
                el.style.fontSize = binding.value; // 30px
            }
        }
    })
</script>
</body>
</html>
